<template>
  <div class="ucenter-content">
    <div class="title">{{ name }}</div>
    <div class="common-modal">
      <div class="c1">
        <MiniChartCard :title="'告警热力分析'" style="position: relative">
          <template #chart>
            <div class="type-select">
              <el-date-picker
                style="width: 100%"
                v-model="thermalDate"
                value-format="YYYY-MM"
                type="month"
                :clearable="false"
                placeholder="请选择月份"
                @change="setThermalDate()"
              />
            </div>
            <ThermalAnalysisW :data="thermalData[thermalYear]['month'][thermalMonth]" :date="thermalDate"></ThermalAnalysisW>
          </template>
        </MiniChartCard>
      </div>
      <div class="c2">
        <MiniChartCard :title="'告警热力分析'">
          <template #chart>
            <ThermalAnalysisM :data="thermalData[thermalYear].data"></ThermalAnalysisM>
          </template>
        </MiniChartCard>
      </div>
      <div class="c3">
        <MiniChartCard :title="'告警趋势'">
          <template #chart>
            <LineEcharts :name="'24小时告警'" :data="alarmCountData"></LineEcharts>
          </template>
        </MiniChartCard>
        <MiniChartCard :title="'当前告警'">
          <template #chart>
            <div class="c3-1">
              <BarEchartsSingle
                :data="curAlarmData"
                :color-list="['#1F8CF2FF']"
                @click-bar="getChoiceAlarmData"
              ></BarEchartsSingle>
              <PieEcharts3
                :name="choiceAlarmData.name + '告警'"
                :data="choiceAlarmData.detail"
                :color-list="curAlarmColor"
              ></PieEcharts3>
            </div>
          </template>
        </MiniChartCard>
      </div>
      <div class="c4">
        <MiniChartCard :title="'告警源统计'">
          <template #chart>
            <AlarmTable></AlarmTable>
          </template>
        </MiniChartCard>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="System">
import { ref, computed } from "vue";
import MiniChartCard from "../component/minChartCard.vue";
import LineEcharts from "../component/lineEcharts.vue";
import PieEcharts3 from "../component/pieEcharts3.vue";
import BarEchartsSingle from "../component/barEchartsSingle.vue";
import ThermalAnalysisW from "../component/thermalAnalysisW.vue";
import ThermalAnalysisM from "../component/thermalAnalysisM.vue";
import AlarmTable from "../component/alarmTable.vue";
import moment from "moment";

export interface Props {
  name: string;
}
withDefaults(defineProps<Props>(), {
  name: ""
});
const alarmCountData = ref([
  { name: "19:20", value: 300 },
  { name: "19:30", value: 400 },
  { name: "19:40", value: 500 },
  { name: "19:50", value: 600 },
  { name: "20:00", value: 700 },
  { name: "20:10", value: 800 }
]);
const curAlarmData = ref([
  {
    name: "Ucenter",
    value: 209,
    detail: [
      { name: "危及", value: 15 },
      { name: "高及", value: 26 },
      { name: "中危", value: 60 },
      { name: "低危", value: 108 }
    ]
  },
  {
    name: "奇安信",
    value: 183,
    detail: [
      { name: "危及", value: 25 },
      { name: "高及", value: 20 },
      { name: "中危", value: 50 },
      { name: "低危", value: 88 }
    ]
  },
  {
    name: "奇安信A",
    value: 180,
    detail: [
      { name: "危及", value: 35 },
      { name: "高及", value: 20 },
      { name: "中危", value: 60 },
      { name: "低危", value: 65 }
    ]
  },
  {
    name: "奇安信B",
    value: 223,
    detail: [
      { name: "危及", value: 15 },
      { name: "高及", value: 20 },
      { name: "中危", value: 80 },
      { name: "低危", value: 108 }
    ]
  },
  {
    name: "奇安信C",
    value: 197,
    detail: [
      { name: "危及", value: 17 },
      { name: "高及", value: 30 },
      { name: "中危", value: 40 },
      { name: "低危", value: 110 }
    ]
  }
]);
const curAlarmColor = ref(["#F6302FFF", "#FF8F1FFF", "#29D3DAFF", "#1F8CF2FF"]);
const choiceAlarmData = ref<any>(curAlarmData.value[0]);
const curMonth = ref(moment(new Date()).format("YYYY-MM"));
const thermalDate = ref(curMonth.value);
const thermalYear = computed(() => Number(thermalDate.value.split("-")[0]));
const thermalMonth = computed(() => Number(thermalDate.value.split("-")[1]));
const thermalData = ref({
  2024: {
    data: [0, 0, 0, 0, 0, 0, 0, 0, 310, 150, 375, 0],
    month: {
      9: [
        210, 75, 80, 80, 80, 80, 80, 80, 180, 10, 310, 80, 80, 180, 80, 80, 310, 310, 310, 310, 110, 310, 310, 210, 310, 310, 310,
        310, 380, 310, 310
      ],
      10: [
        110, 10, 80, 80, 80, 80, 80, 80, 180, 80, 210, 80, 80, 80, 80, 280, 310, 310, 310, 210, 110, 310, 210, 310, 210, 310, 310,
        310, 380, 310, 310
      ],
      11: [
        1, 210, 80, 80, 80, 80, 80, 80, 180, 80, 310, 80, 180, 80, 80, 280, 310, 310, 310, 310, 310, 310, 310, 210, 210, 310, 310,
        310, 380, 310, 310
      ]
    }
  }
});

const getChoiceAlarmData = name => {
  choiceAlarmData.value = curAlarmData.value.find(a => a.name === name);
};
const setThermalDate = () => {
  // 防止日期为空
  if (!thermalDate.value) thermalDate.value = curMonth.value;
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.ucenter-content {
  .type-select {
    position: absolute;
    top: 16px;
    right: 24px;
    width: 200px;
  }
  .c1 {
    flex: 1.7;
    min-width: 800px;
    height: 300px;
  }
  .c2 {
    flex: 1;
    min-width: 450px;
    height: 300px;
  }
  .c3 {
    display: grid;
    flex: 1.7;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    min-width: 800px;
    height: 656px;
    .c3-1 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 16px;
      height: 100%;
    }
  }
  .c4 {
    flex: 1;
    min-width: 450px;
    height: 656px;
  }
}
</style>
